<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>带有遮罩层的弹窗</title>
    <style>
        *{
            box-sizing:border-box;
        }
        body{
            height: 100vh;
            margin:0px;
        }
        /*遮罩层的宽高都是100%  */
         #overlay{
             width:100%;
             height:100%;
             background-color:rgba(0, 0, 0, 0.5);
             position:absolute;
              top:0px;
             left:0px; 
             display: none;
         }
         .box{
             width:400px;
             height:200px;
             border:2px solid coral;
             position:absolute;
             top:calc(50% - 100px);
             left:calc(50% - 200px);
             background-color:blue;
             display: none;
         }
         .close{
             cursor:pointer;
             color:white;
         }
    </style>
</head>

<body>
    <div class="btn"><button onclick="showClick()">弹出框</button></div>
    <div id="overlay"></div>
    <div class="box">
        <span class="close" onclick="closeClick()">&times;</span>
    </div>
</body>

</html>
<script>
    var overlay = document.querySelector('#overlay');
    var box = document.querySelector('.box');
    // 展示
   function showClick(){
       overlay.style.display= 'block';
       box.style.display = 'block';
   } 
//    关闭
    function closeClick(){
    overlay.style.display= 'none';
    box.style.display = 'none';
}
</script>